import React, { Component } from 'react';
import { connect } from 'react-redux';
import { BarChart } from '../../charts/charts';
import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc';
import { Table, Icon } from 'antd';
import { DragHandle } from './traffic';
import table from '../../charts/table';
import BarGraph from './barGraph';
import PieGraph from './pieGraph';
import LineGraph from './lineGraph';
import { actions } from '../action/action';
import staticData from '../static/index';

const listOption = {
    title: '顾客购买能力TOP5',
    limit: 5,
    maxPageCount: 50,
    thead: staticData.listTh,
    pagebar: false,
    download: false,
    beforeRender: function (data, options) {
        return [
            <CustomerName data={data} />,
            <Amount data={data} />,
            <Count data={data} />,
            <SubscribeTime data={data} />,
        ]
    },
    trigger: []
};


// 柱状图报表
const BarGraphItem = SortableElement(({ time, value }) => <BarGraph time={time} options={staticData.keyMapList[value.keyIndex]} data={value} />);
// 各个饼图报表
const PieGraphItem = SortableElement(({ time, value }) => <PieGraph time={time} options={pieOptions} data={value} />);
// 曲线图报表
const LineGraphItem = SortableElement(({ time, value }) => <LineGraph time={time} options={staticData.keyMapList[value.keyIndex]} data={value} />);
// 个人花费TOP5的顾客
const TableItem = SortableElement(({ time, value }) => <TopList data={value} />);

const SortableList = SortableContainer(({ md_count, time, items }) => {

    return (
        <div>
            {
                items.length > 0 && items.map((item, index) => {
                    return item && item.index == 0 ? <div key={`item-${index}`} className={`col-xs-12 col-md-${md_count}`}><BarGraphItem index={index} md_count={md_count} time={time} value={item || { name: '', data: [] }} /></div>
                        : item && item.index == 1 ? <div key={`item-${index}`} className={`col-xs-12 col-md-${md_count}`}><PieGraphItem index={index} time={time} value={item || { name: '', data: [] }} /></div>
                            : item && item.index == 2 ? <div key={`item-${index}`} className={`col-xs-12 col-md-${md_count}`}><LineGraphItem index={index} md_count={md_count} time={time} value={item || { name: '', data: [] }} /></div>
                                : item && item.index == 3 ? <div key={`item-${index}`} className={`col-xs-12 col-md-${md_count}`}><TableItem index={index} time={time} value={item || { name: '', data: [] }} /></div>
                                    : ''
                })
            }
            <div className={`col-xs-12 col-md-${md_count}`}>
                <div className="box box-solid add-dashboard">
                    <div className="box-body"></div>
                </div>
            </div>
        </div>
    );
});

// 获取数据组件

class GetData extends Component {
    componentDidMount() {
        let time = this.props.time;
        this.getData(time);
    }
    componentDidUpdate() {
        let time = this.props.time;
        this.getData(time);
    }
    getData(time) {
        this.props.getSalesData('amount', time); // 销售额
        this.props.getSalesData('rate', time); // 连带率
        this.props.getSalesData('price', time); // 客单价
        this.props.getSalesData('count', time); // 订单数
        this.props.getSalesData('complete', time); // 成交率
        this.props.getSalesData('top', time); // 购买力TOP5
    }
    render() {
        return (<div></div>);
    }
}

const _GetData = connect(
    state => {
        return {
            time: state.time,
            trigger: state.trigger,


        }
    },
    dispatch => {
        return {
            getSalesData: (type, time) => {
                actions.getSalesData(type, time, dispatch);
                // 设置栅格布局宽度
                dispatch({
                    type: 'set-layout-count',
                    val: time
                })
                dispatch({
                    type: 'set-sales-loading',
                    val: type
                });
            }
        }
    }
)(GetData);

// 销售报表
class SalesDashboard extends Component {
    onSortEnd({ oldIndex, newIndex }) {
        let items = arrayMove(this.props.items, oldIndex, newIndex);
        this.props.sortItems(items);
    }
    render() {
        const { items, md_count, time } = this.props;
        return <div>
            <_GetData />
            <SortableList axis="xy" md_count={md_count} time={time} items={items} onSortEnd={this.onSortEnd.bind(this)} useDragHandle={true} />
        </div>
    }
}

const _SalesDashboard = connect(
    state => {
        return {
            items: state.salesItems,
            md_count: state.md_count,
            time: state.time

        }
    },
    dispatch => {
        return {
            sortItems: (items) => {
                dispatch({
                    type: 'sort-sales-items',
                    val: items
                });
            },

        }
    }
)(SalesDashboard);


class TopList extends Component {
    render() {
        const data = this.props.data;
        const columns = [
            {
                title: '顾客姓名',
                dataIndex: 'vipname',
                key: '1',
                render: text => <a href="javascript:void(0)">{text}</a>
            },
            {
                title: '订单金额',
                dataIndex: 'famount',
                key: '2'
            },
            {
                title: '件数',
                dataIndex: 'qty',
                key: '3'
            },
            {
                title: '交易时间',
                dataIndex: 'billdate',
                key: '4'
            }
        ];

        return <div className="box box-solid">
            <div className="box-header with-border" style={{ margin: 0, fontSize: 20 }}>
                <DragHandle />
                <h3 style={{ display: 'inline-block', margin: '0 10px 0 0', fontSize: 16 }}>{data.name}</h3>
            </div>
            <div className="box-body">
                {
                    !data.loading ?
                        data.data.length ?
                            <Table pagination={false} columns={columns} dataSource={data.data} />
                            : <p style={{ textAlign: 'center', marginTop: 100 }}>暂无数据</p>
                        : ''
                }

            </div>
            {
                data.loading ?
                    <div className="overlay">
                        <Icon className="fa" type="loading" />
                    </div>
                    : ''
            }
        </div>
    }
}

const _TopList = connect(
    state => {
        return {
            data: state.salesItems.find(item => { return item && item.index === 3 })
        }
    },
    dispatch => {
        return {

        }
    }
)(TopList);

class CustomerName extends Component {
    render() {
        const vipname = this.props.data.vipname;
        return <div className="preview-media-limit preview-media-limit-group">
            <p>{vipname}</p>
        </div>
    }
}

class Amount extends Component {
    render() {
        const famount = this.props.data.famount;
        return <div className="preview-media-limit preview-media-limit-group">
            <p>{famount}</p>
        </div>
    }
}

class Count extends Component {
    render() {
        const qty = this.props.data.qty;
        return <div className="preview-media-limit preview-media-limit-group">
            <p>{qty}</p>
        </div>
    }
}


//交易时间
class SubscribeTime extends Component {
    render() {
        const billdate = this.props.data.billdate;
        return <div className="preview-media-limit preview-media-limit-group">
            <p>{billdate}</p>
        </div>
    }
}


export default _SalesDashboard;


